<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <link rel="stylesheet" href="/plugins/bootsrap-table/bootstrap-table.min.css">
  <script src="/js/jquery-3.6.1.min.js"></script>
</head>
<style>
  body{
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
  }
</style>
<body>
<div class="container-fluid">
  <h3 id = "h">学生信息</h3>
  <div class="form-inline">
    <div class="form-group">
      <label for="searchName" >姓名</label>
      <input type="text" class="form-control" id="searchName" placeholder="Name" name = "searchName">
      <label for="searchSex" >性别</label>
      <select class="form-control" id = "searchSex" name = "searchSex">
        <option value = "">请选择</option>
        <option value = "0">未知</option>
        <option value = "1">男</option>
        <option value = "2">女</option>
      </select>
<!--      <input type="text" class = "form-control" id = "searchSex" placeholder="Sex" name = "searchSex">-->
    </div>
    <button type = "button" class = "btn btn-default " style="float: right" onclick="search();" >查询</button>
  </div>
  <h4> </h4>
  <table class="table table-striped" id = "student-table">
  </table>

  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick = "preAdd();">
    新增学生信息
  </button>
</div>


<div class="modal fade" tabindex="-1" role="dialog" id = "myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">学生信息</h4>
      </div>
      <div class="modal-body">
        <form id = "studentForm">
          <input hidden = "hidden" id = "id" name = "id"/>
          <div class="form-group">
            <label for="no">学号</label>
            <input type="text" class="form-control" id="no" name = "no" placeholder="学号">
          </div>
          <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" class="form-control" id="name" name = "name" placeholder="姓名">
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" name = "password" placeholder="密码">
          </div>
          <div class="form-group">
            <label for="sex">性别</label>
            <select class="form-control" id = "sex" name = "sex">
              <option value = "0">未知</option>
              <option value = "1">男</option>
              <option value = "2">女</option>
            </select>
          </div>
          <div class="form-group">
            <label for="age">年龄</label>
            <input type="text" class="form-control" id="age" name = "age" placeholder="年龄">
          </div>
          <div class="form-group">
            <label for="score">分数</label>
            <input type="text" class="form-control" id="score" name = "score" placeholder="分数">
          </div>
        </form>
        <!--表单结束-->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick = "saveStudent();">保存</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src = "/js/bootstrap.min.js"></script>
<script src="/plugins/bootsrap-table/bootstrap-table.min.js"></script>
<script src="/plugins/bootsrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
  $(function (){
    $('#student-table').bootstrapTable("destroy");
    loadTable();
  });

  function loadTable(){
    $('#student-table').bootstrapTable({
      url: "/webapi/student/getbypage",
      striped: true,
      pagination: true,
      signalSelect: false,
      pageSize: 3,
      pageNumber: 1,
      sidePagination: "server",
      queryParams:function(params){
        var paraObj = {
          size: params.limit,
          page: params.offset/params.limit,
          sort: "id",
          direct: "desc",
          name: $("#searchName").val(),
          sex: $("#searchSex").val()
        };
        return paraObj;
      },
      columns: [{
        field: 'id',
        title: '序号'
      }, {
        field: 'name',
        title: '姓名'
      }, {
        field: 'no',
        title: '学号',
        width: '300px'
      },{
        field: 'sex',
        title: '性别',
        formatter(value){
          return judge(value)
        }
      },{
        field: 'age',
        title: '年龄'
      },{
        field: 'score',
        title: '分数'
      },{
        field: 'operator',
        title: '操作',
        align: 'center',
        sortable: true,
        width: '100px',
        formatter: function () {
          return '<a href = "#" id = "edit"> 编辑'+'<span style="font-weight: bolder">|</span>'
                  +
                  '<a href = "#" id = "delete">删除';
        },
        events: {
          'click #edit': function (e, value, row) {
            editStudent(row.id);
          },
          'click #delete': function (e, value, row) {
            deleteStudent(row.id);
          }
        }
      }]
    });
  }
  /**
   * 查询学生信息
   */
  function search(){
    $("#student-table").bootstrapTable("destroy");
    loadTable();
  }
  /**
   * 判断当前学生性别，0，1，2分别表示未知，男，女。
   * @param d
   * @returns {string}
   */
  function judge(d){
    var ssex;
    switch(d){
      case 0:
        ssex = "未知";
        break;
      case 1:
        ssex = "男";
        break;
      case 2:
        ssex = "女";
    }
    return ssex;
  }
  function preAdd(){
    $("#id").val(0);//提示新增
  }

  function saveStudent(){
    var data = $("#studentForm").serialize();
    var id = $("#id").val();
    if (id < 1){
      $.ajax({
        url: "/webapi/student/insert",
        method: "post",
        data: data
      }).done(function (){
        $("#student-table").bootstrapTable("destroy");
        loadTable();
        $("#myModal").modal("hide");
      })
    }
    else{
      $.ajax({
        url: "/webapi/student/update",
        method: "put",
        data: data
      }).done(function (){
        $("#student-table").bootstrapTable("destroy");
        loadTable();
        $("#myModal").modal("hide");
      })
    }
  }
  function editStudent(id){
    $("#myModal").modal("show");
    $.ajax({
      url: "/webapi/student/get/"+id
    }).done(function (rs){
      $("#id").val(rs.id);
      $("#no").val(rs.no);
      $("#name").val(rs.name);
      $("#password").val(rs.password);
      $("#sex").val(rs.sex);
      $("#age").val(rs.age);
      $("#score").val(rs.score);
    })
  }
  function deleteStudent(id){
    if(confirm("确定删除？")){
      $.ajax({
        url: "/webapi/student/delete/"+id,
        method: "delete"
      }).done(function (){
        $("#student-table").bootstrapTable("destroy");
        loadTable();
      });
    }
  }
</script>
</body>
</html>